<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(["element", "jquery", "layer", "form", "table",'upload'], function(){
            var $ = layui.jquery;
            var element = layui.element;
            var upload = layui.upload;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var url;
            var tanIndex;
            //展示已知数据
            var mytable=table.render({
                elem: '#demo'
                ,url:'seleRevenueByNum'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,even: true   //开启间隔行的背景颜色
                ,page: true //是否显示分页
                ,limits: [5, 10]
                ,limit: 5 //每页默认显示的数量
                ,cols: [[//标题栏
                    {field:'order.orderNum', title: '订单号', sort: true ,width: 340,align: 'center',templet:function (d) {return d.order.orderNum}}
                    ,{field:'detail.detailId', title: '订单详情', sort: true,width: 300,align: 'center',templet:function (d) {return d.detail.detailId}} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'room.roomPrice', title: '收款金额/元',width: 300,align: 'center',templet:function (d) {return d.room.roomPrice}}
                    ,{field:'method', title: '收款方式',width: 300,align: 'center'}
                    ,{field:'trasfAccount', title: '收款账户', sort: true,width: 250,align: 'center'}
                ]]
            });

            //监听表单提交
            form.on('submit(form-login-filter)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });



            //搜索
            $("#selectName").click(function () {
                mytable.reload({
                    page: {curr: 1 , limit: 5},
                    method: 'POST',
                    url: 'seleRevenueByNum',
                    where: {
                        orderNum: $("#orderNum").val() //参数 多个值,逗号隔开
                    }
                })
            })





            table.on('tool(table-order-filter)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                if (obj.event=='find'){
                    //修改，打开修改窗口
                    var index = layer.open({
                        title: '查看详情',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: false,
                        area: ['80%', '80%'],
                        content: 'find/'+data.orderId,
                    });
                }
        });
        });

        //日期上传
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            var laydate2 = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#date1' ,//指定元素
            });
            laydate2.render({
                elem: '#date2' //指定元素
            });
        });





    </script>
</head>
<body>

<div class="layui-inline">
    <label class="layui-form-label"></label>
    <div class="layui-input-inline">
        <input type="text" name="orderNum" id="orderNum"   autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="selectName">查询</button>
</div>

<!-- 表格行内toolbar -->
<table class="layui-hide" id="demo" lay-filter="demo"></table>


</body>
</html>

